<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <style>
       .login-container {  
            border: 1px solid #ccc;  
            padding: 30px; /* 添加内边距，使内容和边框之间有空间 */  
            max-width: 300px; /* 限制宽度 */  
            margin: 0 auto;   
            background-color: #fff;  
            border-radius: 10px; 
            margin-top: 100px;
            margin-right: 200px;
        }  
      body {  
            font-family: Arial, sans-serif;  
            margin: 0;  
            padding: 20px;  
            background-image: url(https://pic.rmb.bdstatic.com/bjh/beautify/1c25b916b882ba01cd3d41e742729734.jpeg@c_1,w_3200,h_1800,x_0,y_0);  
            background-size: cover;        
          }  
  
        h1 {  
            text-align: center;  
            color: #333;  
        }  
  
        label {  
            display: block;  
            margin-bottom: 5px;  
            font-weight: bold;  
        }  
  
        input[type="text"], input[type="password"] {  
            width: 100%;  
            padding: 10px;  
            margin-bottom: 15px;  
            border: 1px solid #ccc;  
            border-radius: 5px;  
        }  
  
        button#loginBtn {  
            display: block;  
            width: 100%;  
            padding: 10px;  
            background-color: #4590e7;  
            color: white;  
            border: none;  
            border-radius: 4px;  
            cursor: pointer;  
            font-size: 16px;  
        }  
  
        button#loginBtn:hover {  
            background-color: #011a90;  
        }  
    </style>
</head>
<body>
  <div class="login-container"> 
    <h1>Login Page</h1>
    <label for="username">Username:</label>
    <input type="text" id="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password"><br><br>
    <button id="loginBtn">Login</button>
  </div> 
    <script>
    document.getElementById('loginBtn').addEventListener('click', function() {
      var username = document.getElementById('username').value;
      var password = document.getElementById('password').value;
  
      // 假设用户名为 'admin'，密码为 '123456'
      if (username === 'admin' && password === '123456') {
          // 登录成功，跳转到另一个页面
          window.location.href = 'success.html';
      } else {
          alert('Login Failed. Please check your username and password.');
      }
  });
</script>
</body>
</html>
